<template>
  <el-card>
    <!--  -->
    <div class="header-header">
      <div class="content_left">
        <span>说明：目前支持学科和关键字条件筛选</span>
      </div>
      <div class="content_right">
        <el-button type="success"
                   icon="el-icon-edit"
                   size="small"
                   style="background: #67c23a; color: #fff"
                   @click="$router.push('/questions/new')">新增题库</el-button>
      </div>
    </div>
    <!-- 顶部表单区域 -->
    <el-form label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科：">
            <el-select v-model="formData.subjectID"
                       placeholder="请选择"
                       size="small"
                       style="width: 100%">
              <el-option v-for="item in subject"
                         :key="item.id"
                         :label="item.subjectName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目录：">
            <el-select v-model="formData.catalogID"
                       placeholder="请选择"
                       size="small"
                       style="width: 100%">
              <el-option v-for="item in catalogList"
                         :key="item.id"
                         :label="item.directoryName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formData.question"
                      placeholder="根据题干搜索"
                      size="small" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-select v-model="headerData.subject"
                       style="width: 100%"
                       placeholder="请选择"
                       size="small">
              <el-option label="区域一"
                         value="shanghai" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <city-view wid />
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <div class="button">
              <el-button type="primary"
                         size="small"
                         style="background-color: #409eff; color:#fff"
                         @click="handleSearch">搜索</el-button>
              <el-button type=""
                         size="small"
                         @click="handleReset">清空</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="questionsList">
      <el-table-column label="试题编号"
                       prop="number" />
      <el-table-column label="学科"
                       prop="subject" />
      <el-table-column label="目录"
                       prop="catalog" />
      <el-table-column label="题型">
        <template #default="{row}">
          {{ row.questionType ==='1' ? '单选' : '多选' }}
        </template>
      </el-table-column>

      <el-table-column label="题干">
        <template #default="{row}">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column label="录入时间"
                       prop="addDate" />
      <el-table-column label="难度">
        <template #default="{row}">
          {{ row.difficulty === '1' ? '简单' : '困难' }}
        </template>
      </el-table-column>
      <el-table-column label="录入人"
                       prop="creator" />
      <el-table-column label="操作"
                       width="240px">
        <template #default="{ row }">
          <el-button type="primary"
                     icon="el-icon-view"
                     circle
                     @click="handleView(row.id)" />
          <el-button type="success"
                     icon="el-icon-edit"
                     circle
                     @click="handleQuesEdit(row.id)" />
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="handleDelQues(row.id)" />
          <el-button type="warning"
                     icon="el-icon-check"
                     circle
                     @click="addChoice(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <question-view :show-view.sync="showView"
                   :show-view-obj="showViewObj" />
  </el-card>

</template>

<script>
import { getQuestionsListAPI, delQuestionAPI, addOrRemoveChoiceAPI, getQuesDetailAPI } from '@/api/questions-list'
import { getSubjectListAPI, getDirectoryListAPI } from '@/api/subject'
import QuestionView from './components/questionView.vue'
export default {
  name: 'QuestionsListView',
  components: {
    QuestionView
  },
  data () {
    return {
      // 题库列表
      questionsList: [],
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      // 搜索表单
      formData: {
        subjectID: '',
        catalogID: '',
        question: ''
      },
      // 搜索学科列表
      subject: [],
      // 二级目录列表
      catalogList: [],
      headerData: {},
      showView: false,
      // 预览对象
      showViewObj: {}
    }
  },
  watch: {
    formData: {
      async handler (val) {
        if (val.subjectID) {
          const res = await getDirectoryListAPI(val.subjectID)
          // console.log(res)
          this.catalogList = res.items
        }
      },
      deep: true
    }
  },
  created () {
    this.getQuestionsList()
    this.getSubjectList()
  },
  methods: {
    // 获取基础题库列表
    async getQuestionsList () {
      const res = await getQuestionsListAPI(this.query)
      // console.log(res)
      this.total = res.counts
      this.questionsList = res.items
    },
    // 删除题库
    async handleDelQues (id) {
      try {
        await this.$confirm('确实删除嘛', '温馨提示', {
          type: 'warning'
        })
        await delQuestionAPI(id)
        this.$message.success('删除成功')
        this.getQuestionsList()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 获取学科列表
    async getSubjectList () {
      const res = await getSubjectListAPI()
      // console.log(res)
      this.subject = res.items
    },
    // 搜索
    async handleSearch () {
      const res = await getQuestionsListAPI({
        ...this.query,
        ...this.formData
      })
      // console.log(res)
      this.total = res.counts
      this.questionsList = res.items
    },
    // 清空
    handleReset () {
      this.getQuestionsList()
      this.formData.subjectID = this.formData.catalogID = this.formData.question = ''
    },
    // 回显编辑
    async handleQuesEdit (id) {
      this.$router.push(`/questions/new?id=${id}`)
      /* const res = await getQuesDetailAPI(id)
      console.log(res) */
    },
    // 加入精选
    async addChoice (id) {
      try {
        await this.$confirm('要把这个题目添加到精选嘛', '提示', {
          type: 'warning'
        })
        await addOrRemoveChoiceAPI(id, 1)
        this.$message.success('加入成功')
        this.getQuestionsList()
      } catch (e) {
        this.$message.info('已取消')
      }
    },
    // 打开预览
    async handleView (id) {
      this.showView = true
      const res = await getQuesDetailAPI(id)
      console.log('res', res)
      this.showViewObj = res
    }

  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
.el-alert {
  margin-top: 20px;
}
.header-header {
  display: flex;
  justify-content: space-between;
  .content_left {
    font-size: 12px;
    color: pink;
  }
}
.button {
  display: flex;
  justify-content: right;
}
</style>
